<template>
  <el-card class="box-card searchFormStyle" style="margin-bottom:1%;">
    <div slot="header" class="searchTitle">
      <span>{{ titleName[0]||任务管理 }}</span>
      <div class="btn-box">
        <el-button :icon="!cardShow?'el-icon-arrow-down': 'el-icon-arrow-up'" size="mini" style="margin-right:20px;" circle @click="showToggle"/>
      </div>
    </div>
    <div v-show="cardShow" class="text item">
      <el-form ref="SearchDep" :model="SearchDep" label-width="130px">
        <el-row>
          <el-col
            v-for="(inputBox,index) in searchCondition"
            :span="6"
            :key="index">
            <el-form-item
              :label="inputBox.label">
              <el-input v-model="SearchDep[inputBox.field]" :placeholder="`请输入${inputBox.label}`"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-button
                v-for="(btn,index) in btnArr"
                :key="index"
                :icon="btn.icon"
                type="primary"
                @click="btnOperation(btn.title)">
                {{ btn.title }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'TableSearch',
  props: {
    searchCondition: {
      type: Array,
      default: () => ({})
    },
    titleName: {
      type: Array,
      default: () => ({})
    }
  },
  data() {
    return {
      btnArr: [
        { title: '新 增', icon: 'el-icon-plus' },
        { title: '查 询', icon: 'el-icon-search' },
        { title: '重 置', icon: 'el-icon-refresh' },
        { title: '删 除', icon: 'el-icon-delete' }
      ],
      popoverShows: false,
      popoverShow: false,
      cardShow: true,
      SearchDep: {
      },
      orgData: [],
      parentOrgNames: ''
    }
  },
  watch: {
    SearchDep: {
      handler(val) {
        console.log(val)
      }
    },
    deep: true
  },
  created() {
    // console.log(this.SearchDep)
    console.log(this.titleName)
    console.log('====================')
    console.log(this.SearchDep[this.searchCondition[1].data])
    this.createSearchArr()
  },
  methods: {
    // 动态创建绑定值数组
    createSearchArr() {
      this.searchCondition.forEach(val => {
        console.log(val)
        this.SearchDep[val.field] = ''
        // this.SearchDep={
        //   val.label:`请输入${val.field}`
        //   val.label:`请输入${val.field}`
        // }
      })
      console.log(this.SearchDep)
    },

    // 搜索条件显示隐藏
    showToggle() {
      if (this.cardShow) {
        this.cardShow = false
      } else {
        this.cardShow = true
      }
    },
    // 方法体
    btnOperation(title) {
      // console.log(title)
      this.$emit('btnOperation', title)
      switch (title) {
        case '新 增':
          this.$emit('add')
          break
        case '查 询':
          // console.log(this.SearchDep)
          this.$emit('search', this.SearchDep)
          break
        case '重 置':
          // this.createSearchArr()
          console.log(this.SearchDep)
          this.SearchDep = {

          }
          // this.$forceUpdate()
          // this.$set(this.SearchDep, 'taskName', '')
          // this.SearchDep.taskName = ''
          console.log(this.SearchDep)
          break
        case '删 除':
          this.$emit('delete')
          break
      }
    },
    // 重置表单
    resetForm(formName) {
      if (this.addForm.orgKey) {
        this.changeDep('edit')
      } else {
        this.addForm = {
          orgCode: '',
          orgName: '',
          parOrg: '',
          orgType: '',
          orgNumber: '',
          orgDesc: ''
        }
        this.$refs.orgTree.setCheckedNodes([])
        this.parentOrgName = ''
        this.addForm.parOrg = ''
        this.$refs[formName].resetFields()
      }
    }
    // handleNodeClick(data) {
    //   this.popoverShow = false
    //   this.parentOrgNames = data.orgName
    //   this.SearchDep.parOrg = data.orgKey
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/variables.scss";
.searchTitle{
  width: 100%;
  display: flex;
  justify-content: space-between;
  // .el-button{
  //   color: $mainTone;
  //   border: 1px  $mainTone solid;
  // }
}
</style>
